<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" href="../static/plugins/iview/styles/iview.css">
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/widget.css">
    <link rel="stylesheet" href="../static/css/innerPage.css">

    <style>
        .w1200 {
            width: 1200px!important;
        }
        
        i-row {
            line-height: 45px;
            height: 45px;
        }
        
        .CodeMirror {
            min-height: 400px;
        }
    </style>

</head>

<body class="">


    <div class="sc-container w1200" id="app">

        <div id="top-tips-wrap">
            <Alert type="warning" show-icon>
                注意事项
                <template slot="desc">
                        1. 请严格执行组件开发规范，组件库管理平台会自动按照规范审核组件信息。
                        2.需要注册到组件库的组件仅包括基础服务组件和业务公共组件，属性定义公开，其数据服务必须注册到服务总线中。
                    </template>
            </Alert>
        </div>

        <div id="steps-wrap" class="mt_40">
            <Steps :current="1" style="margin-left:10%;">
                <Step title="已完成" content="组件信息"></Step>
                <Step title="进行中" content="参数说明"></Step>
                <Step title="待进行" content="关联服务"></Step>
                <Step title="待进行" content="关联组件"></Step>
            </Steps>
        </div>

        <div id="list-wrap" class="mt_20 clearfix">

            <div class="widget" id="">
                <div class="widget-header">
                    <i class="fa fa-th-large widget-icon "></i>
                    <span class="widget-caption ft-18">组件信息</span>
                    <div class="widget-buttons">
                        <a href="#" data-toggle="collapse">
                            <i class="fa fa-angle-double-up">&nbsp;</i>
                            <span class="up_text">收起</span>
                            <span class="down_text">展开</span>
                        </a>
                    </div>
                </div>
                <div class="widget-body clearfix">

                    <div>
                        <i-row>
                            <i-col span="3" class="text_r" style="padding-right:10px;">
                                <label for="">组件名称：</label>
                            </i-col>
                            <i-col span="6" class="text_l">
                                <i-input style="width:100%;" placeholder="订单开始日期"></i-input>
                            </i-col>
                            <i-col span="6" class="text_r">
                                &nbsp;
                            </i-col>
                            <i-col span="3" class="text_r" style="padding-right:10px;">
                                <label for="">上一版本：</label>
                            </i-col>
                            <i-col span="6" class="text_l">
                                <i-input style="width:100%;" placeholder="订单开始日期"></i-input>
                            </i-col>

                        </i-row>
                        <i-row>
                            <i-col span="3" class="text_r" style="padding-right:10px;">
                                <label for="">所属类型：</label>
                            </i-col>
                            <i-col span="6" class="text_l">
                                <Cascader id="category" style="display:inline-block;width:100%;" :data="searchForm.categoryArr" v-model="searchForm.subCategory" placeholder="请选择业务分类"></Cascader>
                            </i-col>
                            <i-col span="6" class="text_r">
                                &nbsp;
                            </i-col>
                            <i-col span="3" class="text_r" style="padding-right:10px;">
                                <label for="">有效期：</label>
                            </i-col>
                            <i-col span="6" class="text_l">
                                <date-picker type="datetimerange" placeholder="请选择时间范围" style="width:100%"></date-picker>
                            </i-col>

                        </i-row>
                        <i-row class="clearfix">
                            <i-col span="3" class="text_r" style="padding-right:10px;">
                                <label for="">组件版本：</label>
                            </i-col>
                            <i-col span="6" class="text_l">
                                <i-input style="width:100%;" placeholder="订单开始日期"></i-input>
                            </i-col>
                            <i-col span="6" class="text_r">
                                &nbsp;
                            </i-col>
                            <i-col span="3" class="text_r" style="padding-right:10px;">
                                <label for="">供应商：</label>
                            </i-col>
                            <i-col span="6" class="text_l">
                                <i-select v-model="searchForm.supplier" multiple style="width:100%">
                                    <i-option v-for="item in searchForm.supplierList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                                </i-select>
                            </i-col>

                        </i-row>


                        <i-row>
                            <i-col span="3" class="text_r" style="padding-right:10px;">
                                <label for="">所属类型：</label>
                            </i-col>
                            <i-col span="21" class="text_l">
                                <i-input type="textarea" style="width:100%;" placeholder="订单开始日期"></i-input>
                            </i-col>


                        </i-row>

                        <i-row class="clearfix">
                            <i-col span="3" class="text_r" style="padding-right:10px;">
                                <label for="">组件标签：</label>
                            </i-col>
                            <i-col span="21" class="text_l">
                                <Tag closable color="blue">建设项目</Tag>
                                <Tag closable color="green">大数据</Tag>
                                <Tag closable color="red">空气质量</Tag>
                            </i-col>
                        </i-row>

                        <i-row class="clearfix">

                            <i-col span="24" class="text_c">
                                <i-button type="primary">保存</i-button>
                                <i-button>重置</i-button>
                            </i-col>

                        </i-row>

                    </div>



                </div>
            </div>

            <div class="widget " id="00 ">
                <div class="widget-header ">
                    <i class="fa fa-th-large widget-icon "></i>
                    <span class="widget-caption ft-18 ">参数说明</span>
                    <div class="widget-buttons ">
                        <a href="# " data-toggle="collapse ">
                            <i class="fa fa-angle-double-up ">&nbsp;</i>
                            <span class="up_text ">收起</span>
                            <span class="down_text ">展开</span>
                        </a>
                    </div>
                </div>
                <div class="widget-body ">
                    <p style="padding-left:3px; ">源代码：
                        <i class="fa fa-file-zip-o ">&nbsp;</i>
                        <a href="component-10023.zip " style="color:#2d8cf0; " target="_blank ">component-10023.zip</a>
                    </p>
                    <p style="padding-left:3px; ">组件属性：有</p>

                    <i-table stripe :columns="columns_01 " :data="table_01 "></i-table>
                    <div v-on:click.stop="addNewParam" style="height:30px; line-height:30px; border:1px #d7d7d7 dotted; margin-top:5px; text-align:center;cursor:pointer">
                        <i class="fa fa-plus" style="color:#999;"></i> 添加属性
                    </div>


                    <p class="mt_10 " style="padding-left:3px; ">事件属性：有</p>
                    <i-table stripe :columns="columns_02 " :data="table_02 "></i-table>
                    <div v-on:click.stop="addEventParam" style="height:30px; line-height:30px; border:1px #d7d7d7 dotted; margin-top:5px; text-align:center;cursor:pointer">
                        <i class="fa fa-plus" style="color:#999;"></i> 添加属性
                    </div>

                    <p class="mt_10 " style="padding-left:3px; ">示例代码：有</p>
                    <Tabs value="JSON ">
                        <Tab-pane label="JSON " name="JSON ">
                            <textarea rows=" " cols=" " id="jsCode"></textarea>
                        </Tab-pane>
                    </Tabs>

                    <div class="clearfix mt_20" style="border-top:1px #dddee1 solid;padding-top:10px; text-align:center;">
                        <i-button type="primary">保 存</i-button>
                        <i-button>重 置</i-button>
                    </div>


                </div>

            </div>

        </div>



        <div class="widget clearfix " id="00 ">
            <div class="widget-header ">
                <i class="fa fa-th-large widget-icon "></i>
                <span class="widget-caption ft-18 ">关联服务</span>
                <div class="widget-buttons ">
                    <a href="# " data-toggle="collapse ">
                        <i class="fa fa-angle-double-up ">&nbsp;</i>
                        <span class="up_text ">收起</span>
                        <span class="down_text ">展开</span>
                    </a>
                </div>
            </div>
            <div class="widget-body ">
                <i-table stripe :columns="columns_03 " :data="table_03 "></i-table>

                <i-row>


                    <i-col span="10">
                        <i-select v-model="searchForm.service" style="width:100%" placeholder="请选择要添加的关联服务">
                            <i-option v-for="item in searchForm.serviceList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="3">
                        <i-button v-on:click.stop="toAddServiceFun">添加关联服务</i-button>
                    </i-col>

                </i-row>


            </div>
        </div>
        <div class="widget clearfix " id="00 ">
            <div class="widget-header ">
                <i class="fa fa-th-large widget-icon "></i>
                <span class="widget-caption ft-18 ">关联组件</span>
                <div class="widget-buttons ">
                    <a href="# " data-toggle="collapse ">
                        <i class="fa fa-angle-double-up ">&nbsp;</i>
                        <span class="up_text ">收起</span>
                        <span class="down_text ">展开</span>
                    </a>
                </div>
            </div>
            <div class="widget-body ">
                <i-table stripe :columns="columns_04 " :data="table_04 "></i-table>

                <i-row>


                    <i-col span="10">
                        <i-select v-model="searchForm.toAddmodule" style="width:100%" placeholder="请选择要添加的关联服务">
                            <i-option v-for="item in searchForm.toAddmoduleList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                        </i-select>
                    </i-col>
                    <i-col span="3">
                        <i-button v-on:click.stop="toAddmoduleFun">添加关联服务</i-button>
                    </i-col>

                </i-row>

            </div>
        </div>



        <div id="page-bottom-wrap" class="clearfix mt_20 mb_20">
            <i-row class="text_c">
                <i-col span="8">
                    &nbsp;
                </i-col>
                <i-col span="8">
                    <i-button type='primary' size="large" long>提交审核</i-button>
                </i-col>
            </i-row>

        </div>



    </div>


    <script src="../static/js/jquery.js "></script>


    <script src="../static/plugins/iview/vue.min.js "></script>

    <!-- 引入样式 -->
    <!-- <link rel="stylesheet " href="//unpkg.com/iview/dist/styles/iview.css "> -->
    <script src="../static/plugins/iview/locale/zh-CN.js "></script>

    <script src="../static/plugins/iview/iview.min.js "></script>

    <script src="../static/js/suit.js "></script>

    <script src="../static/js/ba-resize.js "></script>

    <link rel="stylesheet " href="../static/plugins/codemirror/codemirror.css ">
    <script src="../static/plugins/codemirror/codemirror.js "></script>
    <!-- <script src="../static/plugins/codemirror/mode/css/css.js "></script> -->
    <script src="../static/plugins/codemirror/mode/javascript/javascript.js "></script>
    <script src="../static/plugins/codemirror/mode/clike/clike.js "></script>
    <link rel="stylesheet " href="../static/plugins/codemirror/theme/monokai.css ">

    <script>
        Vue.mixin({
            methods: {
                //当前打开还是新窗口打开切换
                ChangeHasTop: function() {

                    var a = window.parent.app.changeHasTop(true);

                },
                //当前打开还是新窗口打开切换
                openUrlNewWidow: function(url) {
                    url = url || window.location.href;
                    window.open(url); //在另外新建窗口中打开窗口
                }
            }
        })


        var app = new Vue({
            el: '#app',
            data: {
                toAddService: false,
                toAddModule: false,
                searchForm: {
                    serviceList: [{
                        value: '基础服务-003',
                        label: '基础服务-003'
                    }, {
                        value: '基础服务-004',
                        label: '基础服务-004'
                    }, {
                        value: '基础服务-005',
                        label: '基础服务-005'
                    }, {
                        value: '基础服务-006',
                        label: '基础服务-006'
                    }],
                    toAddmodule: [],
                    toAddmoduleList: [{
                        value: '基础组件-003',
                        label: '基础组件-003'
                    }, {
                        value: '基础组件-004',
                        label: '基础组件-004'
                    }, {
                        value: '基础组件-005',
                        label: '基础组件-005'
                    }, {
                        value: '基础组件-006',
                        label: '基础组件-006'
                    }],

                    service: [],
                    supplierList: [{
                        value: '江苏梦兰神采科技股份有限公司',
                        label: '江苏梦兰神采科技股份有限公司'
                    }, {
                        value: '江苏梦兰科技股份有限公司',
                        label: '江苏梦兰科技股份有限公司'
                    }, {
                        value: '江苏神采科技股份有限公司',
                        label: '江苏神彩科技股份有限公司'
                    }],
                    supplier: [],
                    subCategory: [],
                    categoryArr: [{
                        value: '1',
                        label: '环境监控',
                        children: [{
                            value: '11',
                            label: '移动执法'
                        }, {
                            value: '12',
                            label: '厦门环保'
                        }]
                    }, {
                        value: '2',
                        label: '污水治理',
                        children: [{
                            value: '21',
                            label: '污染指标'
                        }, {
                            value: '22',
                            label: '污染地区'

                        }],
                    }]
                },
                logMore: false,
                columns_01: [{
                    title: '属性名称',
                    key: 'name',
                    width: 150,
                    render: (h, params) => {
                        if (params.row.new) {
                            return h('Input', {
                                props: {
                                    type: 'text',
                                    size: 'default'
                                }
                            }, params.row.name);
                        }
                        return params.row.name;

                    }
                }, {
                    title: '描述',
                    key: 'desc',
                    render: (h, params) => {
                        if (params.row.new) {
                            return h('Input', {
                                props: {
                                    type: 'text',
                                    size: 'default'
                                }
                            }, params.row.name);
                        }
                        return params.row.name;

                    }
                }, {
                    title: '类型',
                    key: 'type',
                    width: 150,
                    render: (h, params) => {
                        if (params.row.new) {
                            return h('Select', {
                                props: {
                                    multiple: 'true',
                                    size: 'small',
                                    // placeholder: '选择类型'
                                }
                            }, params.row.name);
                        }
                        return params.row.name;

                    }
                }, {
                    title: '默认值',
                    key: 'defaultValue',
                    width: 150,
                    render: (h, params) => {
                        if (params.row.new) {
                            return h('Input', {
                                props: {
                                    type: 'text',
                                    size: 'default'
                                }
                            }, params.row.name);
                        }
                        return params.row.name;

                    }
                }],
                table_01: [{
                    name: 'projectId',
                    type: 'string',
                    isRequired: '否',
                    desc: '项目标识',
                    defaultValue: '空',
                }, {
                    name: 'isShowRemark',
                    type: 'boolean',
                    isRequired: '否',
                    desc: '是否显示备注',
                    defaultValue: 'true',
                }, {
                    name: 'noEdit',
                    type: 'boolean',
                    isRequired: '否',
                    desc: '不允许编辑',
                    defaultValue: 'false',
                }],
                columns_02: [{
                    title: '属性名称',
                    key: 'name',
                    width: 150,
                    render: (h, params) => {
                        if (params.row.new) {
                            return h('Input', {
                                props: {
                                    type: 'text',
                                    size: 'default'
                                }
                            }, params.row.name);
                        }
                        return params.row.name;

                    }
                }, {
                    title: '事件描述',
                    key: 'desc',
                    render: (h, params) => {
                        if (params.row.new) {
                            return h('Input', {
                                props: {
                                    type: 'text',
                                    size: 'default'
                                }
                            }, params.row.name);
                        }
                        return params.row.name;

                    }
                }, {
                    title: '必填',
                    key: 'isRequired',
                    width: 150,
                    render: (h, params) => {
                        if (params.row.new) {
                            return h('Input', {
                                props: {
                                    type: 'text',
                                    size: 'default'
                                }
                            }, params.row.name);
                        }
                        return params.row.name;

                    }
                }, {
                    title: '返回',
                    key: 'defaultValue',
                    width: 150,
                    render: (h, params) => {
                        if (params.row.new) {
                            return h('Input', {
                                props: {
                                    type: 'text',
                                    size: 'default'
                                }
                            }, params.row.name);
                        }
                        return params.row.name;

                    }
                }],
                table_02: [{
                    name: 'on-save',
                    type: 'string',
                    isRequired: '否',
                    desc: '保存内容',
                    defaultValue: 'true/false',
                    returnValue: 'true/false',
                }],
                columns_03: [{
                    title: '服务名称',
                    key: 'name',
                    width: 150,
                    render: (h, params) => {
                        var me = this;
                        return h('Button', {
                            props: {
                                type: 'text',
                                size: 'small'
                            },
                            style: {
                                color: '#2d8cf0'
                            },
                            on: {
                                click: () => {

                                    window.parent.app.changePageUrl({
                                        url: '../innerPage/componentDetail.html?id=1003',
                                        menuName: params.row.name,
                                        menuPath: ["组件详情 "]
                                    });

                                }
                            }
                        }, params.row.name);
                    }
                }, {
                    title: '说明',
                    key: 'desc'
                }, {
                    title: '操作',
                    key: 'opt',
                    width: 100
                }],
                columns_04: [{
                    title: '组件名称',
                    key: 'name',
                    width: 150,
                    render: (h, params) => {
                        return h('Button', {
                            props: {
                                type: 'text',
                                size: 'small'
                            },
                            style: {
                                color: '#2d8cf0'
                            },
                            on: {
                                click: () => {

                                    window.parent.app.changePageUrl({
                                        url: '../innerPage/componentDetail.html?id=1002',
                                        menuName: params.row.name,
                                        menuPath: ["组件详情 "]
                                    });

                                }
                            }
                        }, params.row.name);
                    }
                }, {
                    title: '说明',
                    key: 'desc'
                }, {
                    title: '操作',
                    key: 'opt',
                    width: 100
                }],
                table_03: [{
                    name: '基础服务-001',
                    desc: '这是说明说明这是说明说明',
                    opt: '删除'
                }, {
                    name: '基础服务-002',
                    desc: '这是说明说明这是说明说明',
                    opt: '删除'
                }],
                table_04: [{
                    name: '组件-001',
                    desc: '这是说明说明这是说明说明',
                    opt: '删除'
                }, {
                    name: '组件-002',
                    desc: '这是说明说明这是说明说明',
                    opt: '删除'
                }],
                searchBodyShow: false,
                curCity: {},
                cityList: [{
                    id: 1,
                    name: '苏州'
                }, {
                    id: 2,
                    name: '上海'
                }, {
                    id: 3,
                    name: '南京'
                }],
                value1: 'value1',
                value2: '',
                value3: 'value3',
                searchKey: '',
                formInline: {
                    user: '33'
                },


            },
            mounted: function() {
                //折叠面板事件
                InitiateWidgets();

                this.formLeftIconLine();


                setTimeout(function() {
                    var jsStr = `comId = "abc/index.js ";
comjs.use(comId, function(View) {
    //实例化
    var view_one = new View({
        projectId: '1001'
    }, comConfig);
    view_one.onSaveSuccess = function(reData) {
        alert('保存成功回调');
        //外层附加信息的保存
        pageSave(subData);
    };
    view_one.appendTo("#basicInfo_Container_01 ");
});`;

                    var editor1 = CodeMirror.fromTextArea(document.getElementById("jsCode"), {
                        value: jsStr,
                        height: 600,
                        lineNumbers: true,
                        viewportMargin: Infinity,
                        mode: "text/javascript ",
                        styleActiveLine: true,
                        // matchBrackets: true,
                        styleActiveLine: true,
                        // matchBrackets: true,
                        extraKeys: {
                            "F11 ": function(cm) {
                                cm.setOption("fullScreen ", !cm.getOption("fullScreen "));
                            },
                            "Esc ": function(cm) {
                                if (cm.getOption("fullScreen ")) cm.setOption("fullScreen ", false);
                            }
                        }
                    });

                    editor1.setOption('value', jsStr);




                }, 10);



            },
            methods: {
                toAddServiceFun: function() {
                    this.table_03.push({
                        name: '基础服务-003',
                        desc: '这是说明说明这是说明说明'
                    });
                },
                toAddModuleFun: function() {
                    this.table_04.push({
                        name: '基础组件-003',
                        desc: '这是说明说明这是说明说明'
                    });
                },
                addNewParam: function() {
                    this.table_01.push({
                        new: true,
                        name: '',
                        type: '',
                        isRequired: '',
                        desc: '',
                        defaultValue: '',
                    });
                },
                addEventParam: function() {
                    this.table_02.push({
                        new: true,
                        name: '',
                        type: '',
                        isRequired: '',
                        desc: '',
                        defaultValue: '',
                        returnValue: '',
                    })
                },
                logMoreFun: function() {
                    this.logMore = !this.logMore;
                },
                toDebug: function() {
                    var url = '../coms/comViewer.htm';
                    if (window.parent.app.changePageUrl) {
                        window.parent.app.changePageUrl({
                            url: url,
                            menuName: "弹框组件-调试 ",
                            menuPath: ["调试 "]
                        });
                    } else {
                        windows.open(url);
                    }
                },
                showComponentDetail: function(item) {
                    this.changePageUrl({
                        url: '../innerPage/componentDetail.html?id=1001',
                        menuName: cl.name,
                        menuPath: ["组件详情 "]
                    });
                },
                showApiDetail: function(item) {
                    this.changePageUrl({
                        url: '../innerPage/detail.html?id=1001',
                        menuName: cl.name,
                        menuPath: ["服务详情 "]
                    });
                },
                changePageUrl: function(item) {
                    var a = window.parent.app.changePageUrl(item);
                },
                searchBodyShowToggle: function(toVal) {
                    if (toVal == undefined) {
                        this.searchBodyShow = !this.searchBodyShow;
                    } else {
                        this.searchBodyShow = toVal;
                    }

                },
                formLeftIconLine: function() {
                    $(".form-wrap-width-leftIcon .line ").animate({
                        opacity: 0.5
                    });

                    setInterval(function() {
                        $(".form-wrap-width-leftIcon .line ").animate({
                            opacity: 1
                        });
                    }, 200);
                    $(".form-wrap-width-leftIcon .form-right ").resize(function() {
                        var rightWrap = $(".form-wrap-width-leftIcon .form-right ").height();
                        var rightWrapLastChild = $(".form-wrap-width-leftIcon .form-right .widget:last-child ").height();
                        $(".form-wrap-width-leftIcon .line,.form-wrap-width-leftIcon.form-right ").css({
                            height: rightWrap - rightWrapLastChild - 36 + "px "
                        });
                    });
                    $(".form-wrap-width-leftIcon .form-right ").trigger('resize');
                }
            }

        });
    </script>

</body>

</html>